<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../layui/v2.12.0/css/layui.css">
    <script src="../layui/v2.12.0/layui.js"></script>
</head>

<body>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs6">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="progress-box text-center">
                        <input type="text" class="knob dial1" value="80" data-width="120" data-height="120"
                            data-linecap="round" data-thickness="0.12" data-bgColor="#fff" data-fgColor="#1b00ff"
                            data-angleOffset="180" readonly>
                        <h5 class="text-blue padding-top-10 h5">My Earnings</h5>
                        <span class="d-block">80% Average <i class="fa fa-line-chart text-blue"></i></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="progress-box text-center">
                        <input type="text" class="knob dial4" value="65" data-width="120" data-height="120"
                            data-linecap="round" data-thickness="0.12" data-bgColor="#fff" data-fgColor="#a683eb"
                            data-angleOffset="180" readonly>
                        <h5 class="text-light-purple padding-top-10 h5">Panding Orders</h5>
                        <span class="d-block">65% Average <i class="fa text-light-purple fa-line-chart"></i></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-card">
                <div class="layui-card-body">
                    卡片式面板面板通常用于非白色背景色的主体内<br>
                    从而映衬出边框投影
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-card">
                <div class="layui-card-body">
                    卡片式面板面板通常用于非白色背景色的主体内<br>
                    从而映衬出边框投影
                </div>
            </div>
        </div>
    </div>
    <script src="../layui/v2.12.0/layui.js"></script>
    <script>
        (function (window, document, layui) {
            window.$ = layui.jquery;
            window.jQuery = layui.jquery;
        })(window, document, layui);
    </script>
    <script src="../layui/extend/jq.knob/knob.min.js"></script>

    <script>
        $(".dial1").knob();
        $({ animatedVal: 0 }).animate({ animatedVal: 66 }, {
            duration: 3000,
            easing: "swing",
            step: function () {
                $(".dial1").val(Math.ceil(this.animatedVal)).trigger("change");
            }
        });

        $(".dial4").knob();
        $({ animatedVal: 0 }).animate({ animatedVal: 35 }, {
            duration: 3000,
            easing: "swing",
            step: function () {
                $(".dial4").val(Math.ceil(this.animatedVal)).trigger("change");
            }
        });
    </script>
</body>

</html>